<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
</head>

<body>
  <!--
    1. 模板：动态的HTML页面

    2. 双大括号表达式 {{ content }}，数据绑定最常见的形式
          - 标签会被数据对象上的content属性值替换
          - 当数据对象上的content属性发生了改变，插值处的内容都会更新
          - 如果使用v-once指令，插值处只会被渲染一次，当数据改变时，插值处的内容不会更新
          - 双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，可以使用v-html指令
          
    3. 绑定属性
          - Mustache语法不能作用在HTML属性上，遇到这种情况应该使用v-bind指令
                完整写法:
                    v-bind:href="url"  // url会作为表达式解析执行
                    v-bind:[attributeName]="url" // 动态参数的写法，attributeName会作为JavaScript表达式进行动态求值
                简洁写法:  
                    :href="url"
                    :[attributeName]="url" // 动态参数的缩写

          

    4. 绑定事件监听
          - 绑定事件的回调函数
                完整写法:
                    v-on:click="xxx" 
                简洁写法:  
                    @click="xxx"
          
          - 指令修饰符
                <form v-on:submit.prevent="onSubmit">...</form> // .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()


    5. 使用JavaScript表达式
          - 对于所有的数据绑定，Vue都提供了完全的JavaScript表达式支持
              {{ number + 1 }}
              {{ ok ? 'YES' : 'NO' }}
              {{ message.split('').reverse().join('') }}
              <div v-bind:id="'list-' + id"></div>

              上述的表达式会在vue实例的数据作用域下作为JavaScript被解析，但是有一个限制，
              每个绑定都只能包含单个表达式，所以下面的例子都不会生效

              {{ var a = 1 }} // 这是语句，不是表达式
              {{ if (ok) { return message } }} // 控制流也不会生效，请使用三元表达式

-->

  <div id="app">
    <h2>双大括号表达式</h2>
    <p>{{ content }}</p>
    <p>{{ content.toUpperCase() }}</p>

    <h2>指令一: 绑定属性</h2>
    <a v-bind:href="url">完整写法，绑定href属性</a><br>
    <a :href="url">简洁写法，绑定href属性</a><br>

    <h2>指令二: 绑定事件监听</h2>
    <button v-on:click="fun">点我</button>
    <button @click="fun2(content)">点我</button>

  </div>


  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        content: 'NBA I Love This Game',
        url: 'http://www.baidu.com'
      },
      methods: {
        fun() {
          alert('vue')
        },
        fun2(message) {
          alert(message);
        }
      }
    })
  </script>
</body>

</html>